Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

Optional chaining operator in Javascript

Published on: January 29, 2021 By T.Andrew Rayan

Optional chaining operator allows us to access the nested properties of an object without caring about the existence of the properties in the object.

The optional chaining operators are used to handle the non-existing property problem of an object. The optional chaining operator is denoted by ?. operator.

Example

       
let details = {
    name: 'Andrew',
}
console.log(details.address);
console.log(details.address.streetName);

Output

undefined
Uncaught TypeError: Cannot read property 'streetName' of undefined

In the above example, we have an object, details with a property name. Now when trying to access a property address in the details which is not defined will log undefined. When trying to access the nested property streetName from address property, which is not defined will throw an error "Uncaught TypeError: Cannot read property 'streetName' of undefined".

In order to handle this scenario we can use optional chaining operator(?.).

Now, lets rewrite the above code with optional chaining operator.

       
let details = {
    name: 'Andrew',
}
console.log(details.address);
console.log(details.address.streetName);

Output

undefined
undefined

The variable before the ?. must be declared, else it will throw error.

We can also check whether the function exist or not using ?.() syntax.

Example

       
let user = {
    name: 'Andrew',
	admin:()=> {
		console.log('User is admin');
	}
}
user.admin?.();
user.master?.();

Output

User is admin
undefined

In the above example, user.admin?.() will check whether the admin function exist in the user object. If so will execute it else will return undefined.

user.master?.() will return undefined since master function does not exist.

There is an other syntax ?.[] , when we like to use brackets [] to access properties instead of dot notation.

Example

     
let user = {
  firstName: "Andrew",
  
};

let firstName = "firstName";
let lastName = "lastName";

console.log(user?.[firstName]);
console.log(user?.[lastName]);

Output

Andrew
undefined

We can also remove the property of the object using ?. operator.

delete user?.firstName;

This will delete the firstName property from the object user if it exist else it will not throw any error.

Optional chaining operator in Javascript

Published on: January 29, 2021 By T.Andrew Rayan

Categories

Most Read